
import React,{Component} from 'react'

export default class totalSales extends Component{
	
	constructor(props){
		super(props)
	}
	
	Canvas(id,w,h,val,color1,color2){
		let Canvas=document.querySelector(`${id}`);
		let ctx=Canvas.getContext('2d'),
				totalColor=ctx.createLinearGradient(0,0,180,0);
				
		
		ctx.canvas.width=w;
		ctx.canvas.height=h;
		
		ctx.beginPath();
		ctx.lineCap="round";
		ctx.arc(w/2,h,(w/2.3)+10,Math.PI,Math.PI*2,false);
		ctx.closePath();
		ctx.fillStyle='rgb(235,244,249)';
		ctx.fill();
		
		ctx.beginPath();
		ctx.lineCap="round";
		ctx.lineWidth=20;
		ctx.arc(w/2,h,w/2.3,Math.PI,Math.PI+Math.PI*val,false);
		totalColor.addColorStop(0,color1);
		totalColor.addColorStop(1,color2)
		ctx.strokeStyle=totalColor;
		ctx.fill();
		ctx.stroke();
		
		ctx.beginPath();
		ctx.lineCap="round";
		ctx.arc(w/2,h,(w/2.3)-10,Math.PI,Math.PI*2,false);
		ctx.closePath();
		ctx.fillStyle='white';
		ctx.fill();
		
	}

	componentDidMount(){
		
		let Window=window.getComputedStyle(document.querySelector('.total-sales')),
				w = (Window.width).replace('px',''),
				h	= Window.height.replace('px','');
		
		let Nu=75361/94336;

		this.Canvas('#sale-total-1',w, 150, Nu,'rgb(52,121,201)','rgb(97,202,222)');
		this.Canvas('#sale-total-2',w, 150, 0.5,'rgb(66,147,33)','rgb(180,236,80)');
		
	}
	
	render(){
		return(
			<div className="total-sales">
				<article>
					<section>
						<h3>Total sales</h3>
						<span></span>
					</section>
					<article className='progress'>
							<span >General objective 94336</span>
							<span className='reach'>Completed 75361</span>
							<div className="objective">
								<div className="complete"></div>
								<div className="total" ></div>
							</div>
					</article>
				</article>
				<article className="sale-total-bottom">
					<canvas id="sale-total-1"></canvas>
					<p className="ale-total-number">
						<h3>94336</h3>
						<h4>General objective</h4></p>
					<canvas id="sale-total-2"></canvas>
					<p className="ale-total-number">
						<h3>7536</h3>
						<h4>Completed</h4></p>
				</article>
			</div>
		)
	}
}
